<template>
  <!-- 底部弹出 -->
  <van-popup v-model:show="showBottom" round position="bottom" class="popUp" closeable :close-on-click-overlay="false"
    close-icon-position="top-left" safe-area-inset-bottom
    :style="{ height: popUpHeight, transition: 'height 0.3s ease' }" @click-close-icon="closePopUp"
    @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
    <div class="content">
      <div class="title-collect">
        <div class="title">{{ title }}</div>
        <div class="collect" @click="handleCollect">收藏</div>
      </div>
      <div class="tag">
        <van-tag plain round v-for="(tag, index) in formatTag(tag)" :key="index">{{
          tag
        }}</van-tag>
      </div>
      <div class="info">{{ info }}</div>
      <div class="chapter">
        {{ chapter }}话/更新至{{ lastChapter }}
        <span class="more" @click="handleMore">查看全集<van-icon name="arrow" /></span>
      </div>
      <div class="image">
        <ul>
          <li v-for="(pic, index) in picList" :key="index">
            <img :src="getProxyImageUrl(pic)" class="comic-img" />
          </li>
        </ul>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { getProxyImageUrl } from "@/util/index.js"
import { getChapterPreview } from "@/api/index.js";
import { ref, onMounted, watch, computed } from "vue";
import { useStore } from "@/stores/index.js";
import { useRouter } from "vue-router";
const router = useRouter();

const store = useStore();
const openFirstChapterId = computed(() => store.openFirstChapterId);


// 数据绑定
const showBottom = computed(() => store.showPopUp);

const title = ref("");
const tag = ref("");
const info = ref("");
const chapter = ref("");
const lastChapter = ref("");
const picList = ref([]);
const popUpHeight = ref("calc(100vh - 100px)"); // 初始高度
// 计算属性
const comicId = computed(() => store.openComicId)

const handleMore = () => {
  router.push({ path: `/comicCover/${comicId.value}` })
}




// 监听 openComicId 的变化
watch(
  openFirstChapterId,
  async () => {
    // console.log(" watch 章节ID", openFirstChapterId.value);
    if (openFirstChapterId.value != 0) {

      tag.value = "";
      title.value = "";
      info.value = "";
      lastChapter.value = "";
      chapter.value = "";
      picList.value = [];

      const res = await getChapterPreview(openFirstChapterId.value);
      tag.value = res.data.comic.tag;
      title.value = res.data.comic.title;
      info.value = res.data.comic.info;
      lastChapter.value = res.data.comic.lastchapter;
      chapter.value = res.data.chapter;
      picList.value = res.data.piclist.map((item) => item.url);
      store.setShowPopUp(true);
    }
  },
  { immediate: true }
);

onMounted(async () => {
  // console.log("onMounted 章节ID", openFirstChapterId.value);
  if (openFirstChapterId.value != 0) {


    tag.value = "";
    title.value = "";
    info.value = "";
    lastChapter.value = "";
    chapter.value = "";
    picList.value = [];

    const res = await getChapterPreview(openFirstChapterId.value);

    tag.value = res.data.comic.tag;
    title.value = res.data.comic.title;
    info.value = res.data.comic.info;
    lastChapter.value = res.data.comic.lastchapter;
    chapter.value = res.data.chapter;
    picList.value = res.data.piclist.map((item) => item.url);
    store.setShowPopUp(true);
  }
})


function formatTag (str) {
  return str.trim().split(/\s+/);
}

// 触摸事件相关变量
const startY = ref(0); // 记录触摸开始时的 Y 坐标
const startHeight = ref(0); // 记录触摸开始时的高度（像素值）
const initialHeight = window.innerHeight - 100; // 初始高度（像素值）

// 触摸开始事件
const handleTouchStart = (e) => {
  startY.value = e.touches[0].clientY; // 记录手指按下时的 Y 坐标
  startHeight.value = parseFloat(popUpHeight.value); // 记录初始高度
};

// 触摸移动事件
const handleTouchMove = (e) => {
  const currentY = e.touches[0].clientY; // 当前手指的 Y 坐标
  const deltaY = currentY - startY.value; // 手指移动的距离
  let newHeight = startHeight.value - deltaY; // 根据移动距离计算新高度

  // 边界控制
  if (newHeight > window.innerHeight) {
    newHeight = window.innerHeight; // 最大高度限制为屏幕高度
  } else if (newHeight < 0) {
    newHeight = 0; // 最小高度限制为 0（完全隐藏）
    store.setShowPopUp(false); // 关闭预览
  }

  popUpHeight.value = `${newHeight}px`; // 更新弹出层高度
};

// 触摸结束事件
const handleTouchEnd = () => {
  const currentHeight = parseFloat(popUpHeight.value);

  // 松开后固定高度
  if (currentHeight >= window.innerHeight * 0.9) {
    popUpHeight.value = "100%"; // 固定到 100%
  } else if (currentHeight <= initialHeight * 0.1) {
    store.setShowPopUp(false); // 关闭预览
  } else if (currentHeight > initialHeight) {
    popUpHeight.value = "100%"; // 固定到 100%
  } else {
    popUpHeight.value = `${initialHeight}px`; // 回到初始高度
  }
};

const closePopUp = () => {
  store.setShowPopUp(false);
};


</script>

<style scoped>
.popUp {
  height: calc(100vh - 100px);
  overflow-y: auto;
  /* 允许内容滚动 */
  -webkit-overflow-scrolling: touch;
  /* 平滑滚动效果 */
}

/* 隐藏滚动条 */
.popUp::-webkit-scrollbar {
  display: none;
  /* 隐藏滚动条 */
}

.content {
  padding: 15px 10px 0 10px;
  margin-top: 30px;
}

.title-collect {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.collect {
  color: white;
  background-color: red;
  padding: 4px 16px;
  border-radius: 15px;
  cursor: pointer;
  font-size: 12px;
}

.tag {
  font-size: 10px;
  color: #999;
  margin-bottom: 10px;
}

:deep(.van-tag) {
  margin-right: 5px;
}

.chapter {
  font-size: 14px;
  color: #333;
  font-weight: bold;
}

.more {
  float: right;
  font-size: 13px;
  color: #666;
}

.info {
  font-size: 14px;
  color: #333;
  margin-bottom: 20px;
}

.image ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.image li {
  width: 100%;
  padding: 0;
  margin: 0;
}

.comic-img {
  width: 100%;
  height: auto;
}

:deep(.van-popup__close-icon--top-left) {
  top: 10px;
  left: 6px;
}
</style>
